<template>
	<view class="content">
		<view class="quesItem" v-if="type == 1 || type == 2" v-for="(item, index) in datas" :key="index">
			<view class="type_name">{{item.question_type_name}}</view>
			<view class="topic-item1"><rich-text :nodes="item.question_title"></rich-text></view>
			<view class="answer-item1" v-if="item.is_sub_question == 1 && (type == 1 || (type == 2 && item.isshow))">
				<view class="answer_text" v-if="item.is_one_choice == 2 || item.is_many_choice == 2" v-for="(aitem, aindex) in item.answer_list" :key="aindex">
					<text>{{aitem.text}}、</text>
					<rich-text :nodes="aitem.answer"></rich-text>
				</view>
				<view class="zanswer"><text>正确答案：</text><view v-html="item.answer_text"></view></view>
				<view class="analysis_title">题目解析</view>
				<view class="analysis"><rich-text :nodes="item.question_analysis"></rich-text></view>
			</view>
			<view class="sub_question" v-if="item.is_sub_question == 2 && item.isshow" v-for="(subitem,sindex) in item.sub_questionList" :key="sindex">
				<view class="sub_type">{{sindex+1}} 、 {{subitem.question_type_name}}</view>
				<view class="sub_title"><rich-text :nodes="subitem.question_title"></rich-text></view>
				<view class="answer_text" v-if="subitem.is_one_choice == 2 || subitem.is_many_choice == 2" v-for="(aitem, aindex) in subitem.answer_list" :key="aindex">
					<text>{{aitem.text}}、</text>
					<rich-text :nodes="aitem.answer"></rich-text>
				</view>
				<view class="zanswer"><text>正确答案：</text><view v-html="subitem.answer_text"></view></view>
				<view class="analysis_title">题目解析</view>
				<view class="analysis"><rich-text :nodes="subitem.question_analysis"></rich-text></view>
			</view>
			<view class="bottom_look" v-show="type == 2 || item.is_sub_question == 2">
				<view class="iconfont iconjiantou look" :class="{ active_look: item.isshow }" @click="isshow(index)"></view>
			</view>
		</view>
		<!-- 手/笔 和草稿 -->
		<v-open v-if='isOpen' @changeOpen='changeOpen'></v-open>
		<v-draw v-if='isDraw && question_typeid' @clickDraw='clickDraw' :unid="unid" :keyId='id' :sid='sid' :question_typeid='question_typeid' :bimg="bimg" type="test"></v-draw>
		<v-draw v-if='isDraw && kind_type_id' @clickDraw='clickDraw' :unid="unid" :keyId='id' :sid='sid' :kind_type_id='kind_type_id' :bimg="bimg" type="exam"></v-draw>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import open from '@/components/note/Base-open';
	import draw from '@/components/note/Base-draw';
	export default {
		components: {
			vOpen: open,
			vDraw: draw
		},
		data() {
			return {
				type: 1, //1试题 2试卷
				datas: [],
				id: '',
				ids: '',
				len: 1, //ID长度
				bimg: '',
				unid: '', //笔记ID
				sid: '', //科目ID
				question_typeid: '', //题型ID
				kind_type_id: '', // 试卷类型ID
				isOpen: false, // 笔记草稿按钮开关
				isDraw: false, // 启动画布
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				this.isOpen = !this.isOpen // 开关笔记草稿按钮
			} else {
				this.show_card = !this.show_card;
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.type = e.type;
			this.sid = e.sid;
			this.unid = e.unid;
			this.bimg = e.bimg;
			if (this.type == 1) {
				this.ids = this.id;
				this.question_typeid = e.question_typeid;
				this.getQues();
			} else {
				this.getIds();
				this.kind_type_id = e.kind_type_id;
			}
		},
		methods: {
			// 获取数据
			getQues: function() {
				var data = {
					is_get_answer: 2,
					is_out_html: 2,
					question_id: this.ids,
					pagesize: this.len
				};
				this.$zapi.apiPost('user/question.Lists/questionList', data).then(res => {
					if (res.data.code == 200) {
						let questionList = res.data.data.data;
						questionList.forEach((item, key) => {
							item.isshow = false;
						});
						var f_question_string = res.data.data.f_question_string;
						if (f_question_string != '') {
							this.$zapi.apiPost('user/question.Lists/questionSublist', {
								parent_question_id: f_question_string,
								'is_get_answer': 2,
								'is_out_html': 2
							}).then(res => {
								var sub_questionList = res.data.data;
								questionList.forEach((item, key) => {
									if (item.is_sub_question == 2) {
										sub_questionList.forEach((val, k) => {
											if (Number(item.question_id) == Number(val.f_question_id)) {
												util.latex_reques(val.question_sub_lists, 'question_title'); //解析 试题标题 latex 公式转换
												util.latex_reques(val.question_sub_lists, 'question_analysis'); //解析 试题解析 latex 公式转换
												util.latex_answer(val.question_sub_lists, 'answer_list');
												util.setquestion(val.question_sub_lists);
												item.sub_questionList = val.question_sub_lists;
											}
										})
									}
								})
							});
						}
						this.datas = questionList;
						util.latex_reques(this.datas, 'question_title'); //解析 试题标题 latex 公式转换
						util.latex_reques(this.datas, 'question_analysis'); //解析 试题解析 latex 公式转换
						util.latex_answer(this.datas, 'answer_list');
						util.setquestion(this.datas);
					} else {
						this.datas = [];
						uni.showToast({
							title: '还没有试题!',
							icon: 'none'
						});
					}
				});
			},
			// 获取试卷详情
			getIds() {
				var data = {
					eid: this.id,
					is_out_html: 2,
					is_get_answer: 2,
					allowable_tags: '<img>'
				}
				this.$zapi.apiPost('user/exam.Lists/examQuestion', data).then(res => {
					if (res.data.code == 200) {
						var arr = res.data.data.question_lists;
						var ids = [];
						for (var i = 0; i < arr.length; i++) {
							ids.push(arr[i].question_id);
						}
						this.len = ids.length;
						this.ids = ids.join(',');
						this.getQues();
					}
				})
			},
			// 试卷试题是否展示详情
			isshow: function(index) {
				this.datas[index].isshow = !this.datas[index].isshow;
			},
			// 手笔选择事件
			changeOpen(title) {
				if (title === 'hand') { // 点击了手
					this.isDraw = true // 启动画布
					this.isOpen = false // 关闭手笔两个按钮
				}
				if (title === 'pen') { // 点击了笔
					uni.showToast({
						title: '暂未开通~',
						icon: 'none'
					})
				}
			},
			// 画布点击事件
			clickDraw(title) {
				if (title === 'close') {
					this.isDraw = false // 保存后进行关闭画布
				} else {
					this.bimg = title;
					this.isDraw = false; // 关闭画布
					this.$forceUpdate();
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}
	
	.content{
		margin-bottom: 200upx;
	}
	
	.quesItem{
		margin-bottom: 30upx;
		padding: 30upx;
		background: #FFFFFF;
	}

	.type_name {
		font-size: 34upx;
		margin-left: 25upx;
		padding-left: 10upx;
		border-left: 5upx solid #FF9900;
		color: #999999;
		line-height: 1;
	}

	.topic-item1 {
		margin-left: 20upx;
		font-size: 34upx;
		color: #333333;
		margin-top: 15upx;
		margin-right: 20upx;
	}

	.election {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160upx;
		background: #ff9900;
		color: #ffffff;
		border-radius: 30upx;
		margin-right: 20upx;
		font-size: 28upx;
	}

	.active_election {
		background: #FF9900;
	}



	.answer-item1 {
		margin-left: 20upx;
		margin-right: 20upx;
		font-size: 24upx;
		color: #666666;
		margin-top: 5upx;
		margin-bottom: 15upx;
	}

	.answer_text {
		font-size: 32upx;
		color: #666666;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10upx;
	}

	.zanswer {
		margin-top: 20upx;
		font-size: 32upx;
		color: #FF9900;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		line-height: 56upx;
		& text {
			white-space: nowrap;
		} 
		& view {
			font-size: 32upx;
			line-height: 56upx;
		}
	}

	.analysis_title {
		font-size: 34upx;
		font-weight: 500;
		color: #333333;
		margin-top: 20upx;
		margin-bottom: 14upx;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.analysis {
		font-size: 32upx;
		color: #666666;
	}


	.sub_question {
		width: 92%;
		margin-left: 5%;

		.sub_type {
			margin: 20upx 0upx;
			line-height: 1;
			font-size: 30upx;
			color: #999999;
		}

		.sub_title {
			font-size: 30upx;
			color: #333333;
		}

		.answer_text {
			font-size: 30upx;
			color: #666666;
			line-height: 60upx;
		}

		.zanswer {
			font-size: 30upx;
			& view {
				font-size: 30upx;
			}
		}

		.analysis_title {
			font-size: 32upx;
		}

		.analysis {
			font-size: 30upx;
			color: #666666;
		}
	}

	.bottom_look {
		display: flex;
		justify-content: flex-end;
	}

	.look {
		width: 45upx;
		margin-right: 30upx;
		font-size: 50rpx;
		line-height: 50rpx;
	}

	.active_look {
		transform: rotate(90deg);
	}
</style>
